<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <span class="city">上海</span>
        <span class="title">驴妈妈旅游网</span>
        <div class="user">
            <img src="./images/icon/my.png" alt="">
        </div>
    </header>

    <!-- 轮播图   -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner1.jpg" alt=""></a></div>
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner2.jpg" alt=""></a></div>
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner3.jpg" alt=""></a></div>
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner4.jpg" alt=""></a></div>
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner5.jpg" alt=""></a></div>
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner6.jpg" alt=""></a></div>
            <div class="swiper-slide"><a href="javascript:void(0);"><img src="./images/img/banner7.jpg" alt=""></a></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- nav1 -->
    <div class="nav1">
        <ul>
            <li><a href="javascript:void(0);"><img src="./images/icon/nav1.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="./images/icon/nav2.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="./images/icon/nav3.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="./images/icon/nav4.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="./images/icon/nav5.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="./images/icon/nav6.png" alt=""></a></li>
        </ul>
    </div>

    <!-- nav2 -->
    <div class="nav2">
        <ul>
            <li><a href="javascript:void(0)"><img src="./images/icon/j1.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j2.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j3.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j4.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j5.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j6.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j7.png" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/icon/j8.png" alt=""></a></li>
        </ul>
    </div>

    <!-- nav3 -->
    <div class="nav3">
        <ul class="clearfix">
            <li><a href="javascript:void(0)"><img src="./images/img/t1.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/img/t2.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/img/t3.jpg" alt=""></a></li>
        </ul>
    </div>

    <!-- 热门活动 -->
    <div class="popActivity">
        <p>热门活动</p>
        <ul>
            <li><a href="javascript:void(0)"><img src="./images/img/r1.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/img/r2.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/img/r3.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="./images/img/r4.jpg" alt=""></a></li>
        </ul>
    </div>

    <div class="tabBar">
        <div class="tb_title">
            <a class="active" href="">度周末</a>
            <a href="">度长假</a>
        </div>
        <div class="tb_content">
            <ul>
                <li>
                    <a href="javascript:void(0)">
                        <img src="./images/img/zm1.jpg" alt="">
                        <h4>[热门活动]驴妈妈温泉季</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, temporibus amet? Porro
                            maiores non aut saepe vel laboriosam, accusamus nesciunt quis veniam nulla sint distinctio
                            repellendus quam. Ratione, tempore id?</p>
                    </a>
                </li>

                <li>
                    <a href="javascript:void(0)">
                        <img src="./images/img/zm2.jpg" alt="">
                        <h4>[热门活动]驴妈妈温泉季</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, temporibus amet? Porro
                            maiores non aut saepe vel laboriosam, accusamus nesciunt quis veniam nulla sint distinctio
                            repellendus quam. Ratione, tempore id?</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <img src="./images/img/zm3.jpg" alt="">
                        <h4>[热门活动]驴妈妈温泉季</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, temporibus amet? Porro
                            maiores non aut saepe vel laboriosam, accusamus nesciunt quis veniam nulla sint distinctio
                            repellendus quam. Ratione, tempore id?</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <img src="./images/img/zm4.jpg" alt="">
                        <h4>[热门活动]驴妈妈温泉季</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, temporibus amet? Porro
                            maiores non aut saepe vel laboriosam, accusamus nesciunt quis veniam nulla sint distinctio
                            repellendus quam. Ratione, tempore id?</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)">
                        <img src="./images/img/zm5.jpg" alt="">
                        <h4>[热门活动]驴妈妈温泉季</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, temporibus amet? Porro
                            maiores non aut saepe vel laboriosam, accusamus nesciunt quis veniam nulla sint distinctio
                            repellendus quam. Ratione, tempore id?</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- loadmore -->
    <div class="loadmore">
        <span>查看更多</span>
    </div>

    <!-- 底部 -->
    <footer>
        <span>免费注册</span>
        <span>登录</span>
        <span>TOP</span>
    </footer>

    <script src="./js/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 1000, //1秒切换一次
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

        })
    </script>
</body>

</html>